<template>
    <div>
        <m-table :columns="columns" :api="getRoleList" ref="tableRef" :addApi="addRole" :editApi="editRole"
            :title="$route.meta.title">
            <template #button>
                <a-button type="primary" @click="handleEdit('add')" size="small" v-perms="['/adminapi/system.role/save']">新增</a-button>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-button type="primary" @click="handleEdit('edit', record)" v-perms="['/adminapi/system.role/update']" size="small">编辑</a-button>

                    <a-popconfirm :title="`确定删除 [${record.name}] 吗？`"  ok-text="确定" cancel-text="取消"
                        @confirm="handleDelete(record.id)">
                        <a-button type="primary" danger size="small" v-perms="['/adminapi/system.role/delete']" >删除</a-button>
                    </a-popconfirm>
                </a-space>
            </template>


            <template #status="{ record }">
                <a-tag v-if="record.status" color="green">启用</a-tag>
                <a-tag v-else color="red">禁用</a-tag>
            </template>

            <template #permissions="{ record }">
                <a-button type="link" @click="handlePermissions(record)">
                    <Icon name="ant-icon-UserOutlined" />

                </a-button>

                <permissions ref="permissionsRef" @success="() => tableRef?.run()" />
            </template>
        </m-table>

        <edit-popup ref="editPopupRef" @success="() => tableRef?.run()" />
    </div>
</template>

<script setup lang="ts">
import { getRoleList, addRole, editRole, deleteRole } from '@/api/system/permission/role'
import editPopup from './components/edit.vue'
import permissions from './components/permissions.vue'

const tableRef = ref()
const editPopupRef = ref<InstanceType<typeof editPopup>>()
const permissionsRef = ref<InstanceType<typeof permissions>>()

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 100,
        align: 'center',
    },
    {
        title: '角色名称',
        dataIndex: 'name',
        width: 200,
    },
    {
        title: '角色描述',
        dataIndex: 'description',
    },
    {
        title: '状态',
        dataIndex: 'status',
        width: 100,
        align: 'center',
    },
    {
        title: '权限',
        dataIndex: 'permissions',
        width: 100,
        align: 'center',

    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        width: 240,
    },
    {
        title: '操作',
        dataIndex: 'action',
    },

]

const handleEdit = (mode: string, record?: any) => {
    editPopupRef.value?.open(mode, record)
}
const handleDelete = async (id: string) => {
    await deleteRole(id)
    tableRef.value?.run()
}

const handlePermissions = (record: any) => {
    permissionsRef.value?.open(record)
}
</script>
